<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账户安全中心</title>

    <!--公用css引用-->
    <?php include 'include/style.php';?>
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../css/userCenter.css">
</head>
<body>

<!--公共头部-->
<?php include 'include/header.php';?>
<!--END/公共头部-->

<div class="inbox user-center">
    <div class="layout-margin unend">
        <div class="sidebar-end"></div>
        <div class="sidebar-start">
            <?php include 'include/leftnav.php';?>
        </div>

        <!--主体部分-->
        <div class="container">
            <div class="container-inner u-safe">
                <div class="ui-brd-box1">
                    <div class="tit-2 tit-skin-3 top-tit">
                        <span class="h fn-ml20">账户安全中心</span>
                    </div>
                    <div class="tit-3 tit-skin-2 sub-tit">
                        <span class="h fn-ml20">账号安全：</span>
                        <div class="fn-fl progress-wrap">
                            <div class="bl-progress bl-progress-striped fn-dib">
                                <div class="bl-progress-bar progress-bar-success" style="width: 80%;"></div>
                            </div>
                            <span class="text-color-success">较高</span>
                        </div>
                        <span class="fn-fl text-color-6">建议您启动全部安全设置，以保障账户及资金安全。</span>
                    </div>

                    <ul class="safe-list">
                        <li>
                            <div class="safe-head">
                                <i class="icon icon-safe-success"></i>
                                <span class="fn-dib label">手机验证</span>
                                <span class="fn-dib status text-color-7">您验证的手机： <span>186*****000</span>   若已丢失或停用，请立即更换， <span class="warning-color">避免账户被盗</span></span>
                                <a href="javascript:;" class="fn-dib more js-edit">修改</a>
                            </div>
                            <div class="safe-form">

                            </div>
                        </li>
                        <li>
                            <div class="safe-head">
                                <i class="icon icon-safe-success"></i>
                                <span class="fn-dib label">登录密码</span>
                                <span class="fn-dib status warning-color">验证后，可用于快速找回登录密码，接收账户余额变动提醒。</span>
                                <a href="javascript:;" class="fn-dib more js-edit">修改</a>
                            </div>
                            <div class="safe-form fn-rel fn-hide">
                                <div class="bl-tip-box tip-skin-def">
                                    <div class="J-box TJ-box"><span class="J"></span><i class="J"></i></div>
                                    <div class="bl-tip-con">


                                        <form action="#" class="js-form bl-form bl-formhor form-L fn-mt20">
                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>原始密码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput elementJs" required="" name="Pwd" type="text" value="" placeholder="请填写原密码">
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>新密码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput elementJs" required="" name="Pwd" type="text" value="" placeholder="请填写新密码">
                                                    <div class="form-help">由字母加数字或符号，至少两种以上字符组成的6-20位字符，区分大小写</div>
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>再次输入新密码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput elementJs" required="" name="RePwd" type="text" value="" placeholder="请再次填写新密码">
                                                </div>
                                            </div>

                                            <div class="bl-form-group">
                                                <label><em class="text-color-6">*</em>验证码：</label>
                                                <div class="controls">
                                                    <input class="fn-tinput fn-tinput-small elementJs" required="" name="Code" type="text" value="" placeholder="验证码">
                                                    <a class="chk-code" href="javascript:;"><img style="width:77px;height:36px;" src="../images/login/chk-code.jpg" alt=""></a>
                                                    <span>看不清？<a class="text-color-8" href="javascript:;">换一张</a></span>
                                                </div>
                                            </div>

                                            <div class="bl-form-group bl-form-btns">
                                                <label class="fn-vhide">提交：</label>
                                                <div class="controls">
                                                    <button class="fn-btn btn-primary fn-mr8 btn-save" type="submit">确定</button>
                                                </div>
                                            </div>

                                        </form>

                                        <div class="success-tip">
                                            <p>您的登录密码已修改！ <span class="num">3</span>秒后重新登陆。 <a href="login.php" class="text-color-9 link">立即登陆</a></p>
                                        </div>

                                    </div>
                                </div>


                            </div>
                        </li>
                        <li class="ui-nobrd-b">
                            <div class="safe-head">
                                <i class="icon icon-safe-warning"></i>
                                <span class="fn-dib label">邮箱验证</span>
                                <span class="fn-dib status text-color-7">验证后，可用于快速找回登录密码，接收账户余额变动提醒。</span>
                                <span class="more">
                                    <a href="javascript:;" class="fn-btn fn-btn-small">立即验证</a>
                                </span>
                            </div>
                            <div class="safe-form">

                            </div>
                        </li>


                    </ul>

                </div>


            </div>

        </div>
        <!--END/主体部分-->

    </div>
</div>

<!--公共尾部-->
<?php include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
<?php include 'include/script.php'; ?>
<!--END/公用js引用-->

<script>
    $(function(){
       var editBtn=$('.js-edit');

        //修改
        editBtn.on('click',function(){
            var safeWrap=$(this).closest('.safe-head').next('.safe-form');
            safeWrap.slideToggle();
        });

        //获取验证码
        $('.js-getCode').click(function(){
            var $el=$(this),sNum=120000;
            if($el.hasClass('disabled')) return;

            var countDown=tools.buttonCountdown($el, sNum, 'm:s','后重发');
            //todo 发送获取验证码的请求
            $.ajax({
                url:'../js/success.json',
                type:'post',
                dataType:'json',
                success:function(res){

                }
            });
        });

        $('.js-form').submit(function(e){
            e.preventDefault();

            var jqForm=$(this);

            $.ajax({
                url:'../js/success.json',
                type:'post',
                dataType:'html',
                success:function(res){

                }
            })
        });



    });
</script>
</body>
</html>